<template>
  <div class="container learnstyle-page">
    <el-row>
      <el-col>
        <subject-info @change="changeSubject"></subject-info>
      </el-col>

      <el-col>
        <question-type @change="changeQuestionType"></question-type>
      </el-col>

      <el-col>
        <question-list v-if="hasWrongQuestionFlag" :questionList="wrongBookQuestionList"></question-list>

        <el-card v-if="!hasWrongQuestionFlag" class="no_data">
          <i class="el-icon-takeaway-box"></i> 暂无错题记录
        </el-card>
      </el-col>

      <el-col>
        <el-pagination
          v-if="total > pageSize"
          background
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          layout="total, prev, pager, next, jumper">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import subjectInfo from '@/components/subject-info'
  import questionType from '@/components/question-type'
  import questionList from '@/components/question-list'
  export default {
    name: 'wrongBook',
    components: {subjectInfo, questionType, questionList},
    data () {
      return {
        query: {
          questionType: '',
          subjectId: ''
        },
        hasWrongQuestionFlag: true,
        currentPage: 1,
        total: 0,
        pageSize: 5,
        wrongBookQuestionList: []
      }
    },

    mounted() {
      this.getWrongBookQuestionList()
    },

    methods: {

      changeQuestionType (val) {
        this.query.questionType = val
        this.currentPage = 1
        this.getWrongBookQuestionList()
      },

      changeSubject (val) {
        this.query.subjectId = val
        this.currentPage = 1
        this.getWrongBookQuestionList()
      },

      handleCurrentChange (val) {
        this.currentPage = val
        this.getWrongBookQuestionList()
      },

      getWrongBookQuestionList () {
        this.axios.get(this.$httpApi.httpUrl('/student/wrongBook'), {
          params: {
            pageNumber: this.currentPage,
            pageSize: this.pageSize,
            questionType: this.query.questionType,
            subjectId: this.query.subjectId
          }
        }).then(response => {
          let result = response.data.data
          this.wrongBookQuestionList = result.dataList
          if (this.wrongBookQuestionList.length === 0) {
            this.hasWrongQuestionFlag = false
          } else {
            this.hasWrongQuestionFlag = true
          }
          this.total = result.total
        })
      }
    }
  }

</script>

<style lang='scss' scoped>

  .box_card {
    display: inline-block;
    margin: 20px;

  }

  .no_data {
    margin-top: 40px;
    line-height: 300px;
    text-align: center;
    font-size: 20px;
    color: rgb(155, 155, 155);
  }

  .el-pagination {
    text-align: center;
    margin-bottom: 15px;
  }
</style>
